<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人脸识别考勤系统</title>
    <script src="jquery-3.5.1.min.js"></script>
    <style>
    *{
        padding: 0;
        margin:0;
        box-sizing: border-box;
        font-family: 'Poppins',sans-serif;
    }
    
    /* 设置整个表单参数 (父盒子)*/
    
    section {
        position: relative;
        min-height: 100vh;
        background: lightblue;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }
    
    section .container {
        position: relative;
        width: 800px;
        height: 500px;
        background: #fff;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
    
    section .container .user{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        
    }
    
    /* 更改图片  （左侧）*/
    section .container .imgBx{
        position: relative;
        width: 50%;

    }
    
    section .container .user .imgBx img{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* 右侧表单盒子 */
    
    section .container .user .formBx {
        position: relative;
        width: 50%;
        height: 100%;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px;
        transition: .5s;
    }
    
    /* h2 */
    
    section .container .user .formBx form h2{
        font-size: 18px;
        font-weight: 600;
        text-transform: uppercase;/*大小*/
        letter-spacing: 2px;/* 间距*/
        text-align: center;
        width: 100%;
        margin-bottom: 10px;
        color: #555;
    }
    
    /* 表单文字属性 */
    
    section .container .user .formBx form input{
        position: relative;
        width: 100%;
        padding: 10px;
        background: #f5f5f5;
        color: #333;
        border: none;
        outline:none;
        box-shadow:none;
        margin: 8px 0;
        font-size: 14px;
        letter-spacing:1px;
        font-weight: 300;
    }
    
    /* 为登录设置样式 */
    
    section .container .user .formBx form input[type="submit"]{
        max-width: 100px;
        background: #677eff;
        color:#fff;
        cursor:pointer;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 1px;
        transition: .5s;
    } 
    
    
    /* 没有账号时 */
    
    section .container .user .formBx form .signup{
        position: relative;
        margin-top: 20px;
        font-size: 12px;
        letter-spacing: 1px;
        color: #555;
        text-transform: uppercase;
        font-weight: 300;
    }
    
    section .container .user .formBx form .signup a{
        font-weight: 600;
        text-decoration: none;
        color: #677eff;
    }
    section .container .singupBx {
        pointer-events: none;
    }
    
    section .container.active .singupBx {
        pointer-events: initial;
    }
    
    section .container .singupBx .formBx {
        left: 100%;
    }
    
    section .container.active .singupBx .formBx {
        left: 0;
    }
    
    section .container .singupBx .imgBx {
        left: -100%;
    }
    
    section .container.active .singupBx .imgBx {
        left: 0;
    }
    
    
    section .container .singinBx .formBx {
        left: 0;
    }
    
    section .container.active .singinBx .formBx {
        left: 100%;
    }
    
    section .container .singinBx .imgBx {
        left: 0;
    }
    
    section .container.active .singinBx .imgBx {
        left: 100%;
    }
    
    @media (max-width: 991px) {
        section .container {
            max-width: 400px;
        }
    
        section .container .imgBx {
            display: none;
        }
    
        section .container .user .formBx {
            width: none;
        }
    }
    
    </style>
    
</head>
<body>
    <section>
        
        <!-- 登录 -->

        <div class="container">
            <div class="user singinBx">
                <div class="imgBx"><img src="imag/loginpic.png" alt=""></div>
                <div class="formBx">
                    <form action="">
                        <h2>登录</h2>
                        <input type="text" name="username" placeholder="用户名">
                        <input type="password" name="password" placeholder="密码">
                        <input type="button" name="" value="登录" onclick="location.href='face-rec.html'">
                        <p class="signup">没有账号？<a href="#" onclick="topggleForm();">注册</a></p>
                    </form> 
                </div>
            </div>

            <!-- 注册 -->

            <div class="user singupBx">
                <div class="formBx">
                    <form action="./addUser.php" method="post" target="_blank">
                        <h2>注册</h2>
                        <input type="text" name="username" placeholder="用户名">
                        <input type="email" name="email" placeholder="邮箱地址">
                        <input type="password" name="psd1" placeholder="密码">
                        <input type="password" name="psd2" placeholder="再次输入密码">
                        <input type="button" name="userSubmit" value="注册">
                        <p class="signup">已有账号？<a href="#" onclick="topggleForm();">登录</a></p>
                    </form>
                </div>
                <div class="imgBx"><img src="imag/register.jpeg" alt=""></div>
            </div>

        </div>
    </section>
    <script type="text/javascript">
        function topggleForm(){
            var container = document.querySelector('.container');
            container.classList.toggle('active');
        }
    </script>

   
</body>
</html>
